<template>
  <div class="login" >
    <div class="logo">
      <el-image style="width: 180px; height: 150px"
                :src="logoUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="cover"
      />
    </div>
    <!--    注册表单-->
    <div class="registContain">
    <el-form
        ref="formRef"
        :rules="registerRules"
        :model="form"
        label-width="120px"
    >
      <span class="spanMsg" >欢迎注册原神启动论坛账号</span>
<!--      账号框-->
      <el-form-item class="leave " label="账号" prop="username" >
        <el-input
            class="FromPublicAttribute "
            autocomplete="off"
            v-model="form.username"
            placeholder="请输入注册账号"
        />
      </el-form-item>
<!--      密码框-->
      <el-form-item label="密码" prop="password">
        <el-input
            class="FromPublicAttribute"
            v-model="form.password"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
        />
      </el-form-item>
<!--      确认密码框-->
      <el-form-item label="确认密码"  prop="confirmPassword">
        <el-input
            class="FromPublicAttribute"
            v-model="form.confirmPassword"
            type="password"
            autocomplete="off"
            placeholder="请确认密码"
            show-password
        />
      </el-form-item>

      <el-form-item>
        <el-button class="register-button" type="primary" @click="register()">注册</el-button>
        <el-button class="reset">重置</el-button>
      </el-form-item>
    </el-form>
    </div>


  </div>
</template>

<script setup>
//背景图片
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {registerApi, registerValidateApi} from "../../api/userApi.js";
import router from "../../routers/router.js";

let logoUrl = "https://s11.ax1x.com/2023/12/20/pioO4YT.png"
const formRef = ref()
let form = reactive({
  username:'',
  password:'',
  confirmPassword:''
})
// 用户名校验规则
const validateUsername = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('用户名长度不能小于6位'))
  } else {
    callback()
  }
}
// 密码校验规则
const validatePassword = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码长度不能小于6位'))
  } else {
    callback()
  }
}
// 确认密码校验规则
const validateConfirmPassword = (rule, value, callback) => {
  if (value.length < 6) {
    callback(new Error('密码长度不能小于6位'))
  } else {
    callback()
  }
}

// 校验规则
const registerRules = {
  username: [{ required: true, validator: validateUsername }],
  password: [{ required: true, trigger: 'blur', validator: validatePassword }],
  confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }]
}


//点击注册的回调函数
const register = async () => {
  //校验表单规则
  await formRef?.value.validate()
  //校验两次密码一致
  if (form.password === form.confirmPassword){
    //调用校验账号是否重名接口
    let test =  await registerValidateApi(form.username)
    console.log(test)
    //调用注册接口
    await registerApi(form)
    //清空表单数据
    formRef.value?.resetFields()
    ElMessage.success("注册成功")
    await router.push("/login")
  }else {
    return ElMessage.error("密码和确认密码必须一致")
  }

}

</script>

};
<style scoped>
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 让图片填充元素 */
  background: url('../../assets/registeBackgroundimg.jpg') center/contain no-repeat;
  background-size: cover; /* 保持图片比例并填充整个元素 */
}

.logo {
  margin-right: 1500px;
  padding-top: 30px;
}
.FromPublicAttribute{
 width: 200px;
}
.registContain{
  position: absolute;
  top: 350px;
  left: 1300px;
  width: 400px;
  height: 300px;
  background-color: rgb(255, 255, 255, 0.5);
  border: 1px solid rgb(255, 255, 255, 0.5) ;
  border-radius: 10px;
}
.spanMsg{
  display: inline-block;
  margin-top: 20px;
}
.leave{
  margin-top: 10px;
}
::v-deep .reset{
  margin-left: 50px;
}
::v-deep .register-button{
  margin-left: 10px;
}

</style>
